<style lang="scss" scoped>
  .li{
    border: 1px solid #0f3056;
    background-color: #091f2d;
    width: 854px;
    height: 639px;
    .top{
      padding: 10px 33px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 102px;
      position: relative;
      &:before{
        content:'';
        display: block;
        position: absolute;
        left: 26px;
        top: 101px;
        width: 780px;
        height: 0px;
        border: 1px solid #40A0FC;
        opacity: 0.2;

      }
      .img{
        width: 44px;
        height: 44px;
        margin-right: 40px;
      }
      .title{
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3E9FCB;
        opacity: 1;
      }
      .block{
        position: absolute;
        right: 39px;
        top: 32px;
        /*width: 261px;*/
        /*height: 60px;*/
        .demonstration{
          display: none;
        }
      }
    }
  }
</style>
<style lang="scss" >
  .lines_echarts_datepicker{
    .el-input__inner{
      /*width: 261px;*/
      /*height: 60px;*/
      background: #001A2E;
      border: 1px solid rgba(227, 227, 227, 0.25098039215686274);
      opacity: 1;
      border-radius: 4px;

    }
    input::-webkit-input-placeholder{
      color:#5f646f;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:#5f646f;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:#5f646f;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
      color:#5f646f;
    }


  }
</style>
<template>
  <div class="li">
    <div class="top">
      <img src="icons02/@2x/mokuaishixu@2x.png" class="img">
      <span class="title">模块时序图</span>
      <div class="block">
        <el-date-picker
          class="lines_echarts_datepicker"
          v-model="value1"
          value-format="yyyy-MM-dd"
          @change="changeDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <Gante :commonEchartsObj="countDeliverRecord"></Gante>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'
  import {listOtherModularSeqDataByDay
  } from "@/api/device/perichart";
  import Gante from './gante.vue'
  export default {

    data() {
      return {
        value1: moment().format('YYYY-MM-DD'),
        countDeliverRecord: {
          echarts_name: `lines6`,
          line_list: [],
          line_date: [],
        },
      }
    },
    props: ['periViewRow'],
    mounted() {
      this.initData()

    },
    watch: {

    },
    components: {
      Gante
    },
    methods: {
      changeDate(v) {
        this.initData()
      },
      initData() {
        listOtherModularSeqDataByDay({deviceId: this.periViewRow.id, createTime:this.value1})
//        listModularTemperatureDataByDay({deviceId: this.periViewRow.id, createTime:'2020-10-29'})
          .then(res => {
            console.log(res);
            this.countDeliverRecord.line_date = [];
           var arr1 = [], arr2 = [];
            (res.data.runningTime || []).forEach( item => {
              this.countDeliverRecord.line_date.push(item.typeName)
//              arr1.push(item.startTime)
//              arr2.push(item.endTime)
              arr1.push(+moment(item.startTime).format('HH'))
              if (+moment(item.startTime).format('HH') >= +moment(item.endTime).format('HH')) {
                arr2.push(24 - (+moment(item.startTime).format('HH')))
              } else {
                arr2.push(+moment(item.endTime).format('HH') - (+moment(item.startTime).format('HH')))
              }


            })
            console.log(this.countDeliverRecord.line_date);
            console.log(arr1);
            console.log(arr2);
            var series = [
              {
                name: '开始时间',
                type: 'bar',
                stack: '总量',
                barGap: '1%',
                itemStyle: {
                  normal: {
                    color: 'rgba(0,244,0,0)',
                    width: 2,
                    height:2
                  }
                },

                data: arr1
              },
              {
                name: '完成时间',
                type: 'bar',
                stack: '总量',
                barGap: '1%',
                barWidth: 3,
                itemStyle: {
                  width: 2,
                  height:2,
                  normal: {
                    color: '#3E9FCB',
                  }
                },
                data: arr2
              },
            ]

//            let arr1 = [], arr2 = [], arr3=[];
//            this.countDeliverRecord.line_date = [];
//            (res.data.realHumidity || []).forEach(item => {
//              this.countDeliverRecord.line_date.push(item.time)
//              arr1.push(item.number)
//
//            });
//            (res.data.realTemperature || []).forEach(item => {
//              arr2.push(item.number)
//            });
//            (res.data.realO2Content || []).forEach(item => {
//              arr3.push(item.number)
//            });
//            var series = [
//              {
//                name: '湿度',
//                type: 'line',
//                showSymbol: true,
//                symbol: 'circle',
////                smooth:true,
//                symbolSize: 6,
//                colorClass: '#AFE2F9',
//                lineStyle: {
//                  width: 0.5,
//                  color: '#AFE2F9'
//                },
//                itemStyle: {
//                  shadowBlur: 12,
//                  shadowColor: '#AFE2F9',
//                  opacity:0.1,
//                  normal: {
//                    color: "#091f2d",
//                    borderWidth: 1,
//                    borderColor: '#AFE2F9',
//                    width: 3,
//                    lineStyle: {
//                      color: "#AFE2F9",
//                      width: 1,
//                    }
//                  }
//                },
//                data: arr1
//              },
//              {
//                name: '温度',
//                type: 'line',
//                showSymbol: true,
//                symbol: 'circle',
////                smooth:true,
//                symbolSize: 6,
//                colorClass: '#00D1E3',
//                lineStyle: {
//                  color: '#00D1E3'
//                },
//                itemStyle: {
//                  borderWidth: 1,
//                  borderColor: '#00D1E3',
//                  shadowBlur: 12,
//                  shadowColor: '#00D1E3',
//                  opacity:0,
//                  normal: {
//                    color: "#091f2d",
//                    lineStyle: {
//                      color: "#00D1E3",
//                      width: 1,
//                      type:'dotted'
//                    },
//                    borderWidth: 1,
//                    borderColor: '#00D1E3',
//                  }
//                },
//                data: arr2
//              },
//              {
//                name: 'O2',
//                type: 'line',
//                showSymbol: true,
//                symbol: 'circle',
////                smooth:true,
//                symbolSize: 6,
//                colorClass: '#E3E3E3',
//                lineStyle: {
//                  width: 0.5,
//                  color: '#E3E3E3'
//                },
//                itemStyle: {
//                  shadowBlur: 12,
//                  shadowColor: '#E3E3E3',
//                  opacity:0.1,
//                  normal: {
//                    color: "#091f2d",
//                    borderWidth: 1,
//                    borderColor: '#E3E3E3',
//                    width: 3,
//                    lineStyle: {
//                      color: "#E3E3E3",
//                      width: 1,
//                    }
//                  }
//                },
//                data: arr3
//              },
//            ];
            this.$set(this.countDeliverRecord, 'line_list', series);
          })
      }

    },
    beforeDestroy() {

    }
  }
</script>
